<!--
 * @Author: your name
 * @Date: 2021-10-05 00:37:16
 * @LastEditTime: 2021-10-05 00:57:15
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /my_calendar/src/components/calendar/eventCard.vue
-->
 <template>
    <p class="event-item" :class="cssClasses"
       @click="$emit('click', event, $event)">
        <slot :event="event" v-if="showTitle">
            Def: {{ event.title }}
        </slot>
    </p>
</template>

<script>
import moment from 'moment'
export default {
  // props: ['event', 'date', 'firstDay'],
  props: {
    firstDay: {
      type: Number,
      default: 0
    },
    event: {
      type: Array,
      default: () => []
    },
    date: {
      type: Object,
      default: () => {}
    }

  },
  computed: {
    cssClasses () {
      let cssClasses = this.event.cssClass

      if (!Array.isArray(cssClasses)) {
        cssClasses = [cssClasses]
      } else {
        cssClasses = Array.from(cssClasses)
      }

      if (this.start.isSame(this.date, 'day')) {
        cssClasses.push('is-start')
      }

      if (this.end.isSame(this.date, 'day')) {
        cssClasses.push('is-end')
      }

      if (!this.event.isShow) {
        cssClasses.push('is-opacity')
      }

      return cssClasses.join(' ')
    },
    showTitle () {
      return (this.date.day() === this.firstDay || this.start.isSame(this.date, 'day'))
    },
    start () {
      return moment(this.event.start)
    },
    end () {
      return moment(this.event.end)
    }
  }
}
</script>
